<template>
  <div class="box">
    <div class="left">
      <div class="top1"></div>
      <div class="top2">
        <div class="top2_one"></div>
        <div class="top2_two"></div>
        <div class="top2_three"></div>
      </div>
      <div class="top3"></div>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorlnpmd',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.box {
  margin: 0 auto;
  width: 1400px;
  height: 600px;
  background:#42b983 ;
  //background-color: red;
  //.left{
  //  width: 40%;
  //  height: 100%;
  //  background-color: #87df;
  //  .top1,.top2 {
  //    height: 30%;
  //    background-color: #4415b2;
  //  }
  //  .top2{
  //    background-color: pink;
  //    .top2_one,.top2_two,.top2_three{
  //     width: 30%;
  //     margin-right:5px ;
  //    }
  //  }
  //}
}
</style>
